<template name="shareAction">
	<view class="mask"  v-if="isShow" @tap="close">
		<view class="actionBox" >
			<view class="list">
				<view class="item"  @tap.stop="share('QQ')" v-if="isIstQQ">
					<text class="iconfont icon-qq"></text>
					<text>QQ</text>
				</view>
				<view class="item"   @tap.stop="share('miniProgram')" v-if="isIstWx">
					<text class="iconfont icon-weixin"></text>
					<text>微信</text>
				</view>
				<view class="item"  @tap.stop="share('WXSenceTimeline')" v-if="isIstWx">
					<text class="iconfont icon-pengyouquan"></text>
					<text>朋友圈</text>
				</view>
				<view class="item"  @tap.stop="share('sinaweibo')" v-if="isIstWeibo">
					<text class="iconfont icon-sina"></text>
					<text>微博</text>
				</view>
				<view v-if="poster" class="item" @tap.stop="createPoster" >
					<text class="iconfont icon-copy"></text>
					<text>生成海报</text>
				</view>
			</view>
			<button @tap="close">取消</button>
		</view>
	</view>
</template>

<script>
	
	import Request from "@/sdk/pocky-request/index.js";
	import CFG from "../../common/config.js";
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	export default{	
		name:'shareAction',		//组件名称
		// 传递参数
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		props:{
			id:{		
				type:Number | String,
				default:0
			},
			type:{
				type:Number,
				default:0
			},
			poster:{
				type:Boolean,
				default:false
			}
		},
		// 组件参数
		data(){
			return {
				isShow:false,
				acShow:true,
				koulin:'',
				title:'',
				img:'',
				href:'',
				cntText:'',
				isIstWx: false,
				isIstQQ: false,
				isIstWeibo:false,
				// showCopy:true
			}
		},
		// 组件方法
		methods:{
			createPoster(){
				this.close();
				this.$parent.showPoster();
			},
			checkInstall() {
				// #ifdef APP-PLUS
				if (plus.runtime.isApplicationExist({
						pname: 'com.tencent.mm',
						action: 'weixin://'
					})) {
					this.isIstWx = true;
				}
				if (plus.runtime.isApplicationExist({
						pname: 'com.tencent.mobileqq',
						action: 'mqq://'
					})) {
					this.isIstQQ = true;
				}
				if (plus.runtime.isApplicationExist({
						pname: 'com.sina.weibo',
						action: 'sinaweibo://'
					})) {
					this.isIstWeibo = true;
				}
				// #endif
			},
			share(e){
				console.log(this.type);
				if(this.type>8){
					if(e=="miniProgram"){
						this.href='pagesA/'+this.href+'&isShare=1'
					}else{
						this.href=CFG.shareUrl+this.href
					}
					this.$store.dispatch("shareCard",{
						provider:e,
						title:this.title,
						img:this.img,
						href:this.href,
						text:this.cntText
					})
				}else{
					console.log(e);
					if(e=="miniProgram"){
						this.$store.dispatch("shareCard",{
							provider:e,
							title:this.title,
							img:this.img,
							href:this.href,
							text:this.cntText
						})
					}else{
						this.$store.dispatch("apiGetPass",{
							id:parseInt(this.id),
							type:parseInt(this.type)
						}).then(res=>{
							console.log(res);
							this.koulin=res.data.data.token;
							this.cntText=this.koulin;
							this.href=res.data.data.link;
							if(this.isLogin && this.type==2){
								this.$store.dispatch("shareCard",{
									provider:e,
									title:this.title,
									img:this.img,
									href:this.href+','+this.userInfo.userId,
									text:this.cntText
								})
							}else{
								this.$store.dispatch("shareCard",{
									provider:e,
									title:this.title,
									img:this.img,
									href:this.href,
									text:this.cntText
								})
							}
						})
					}
				}
			},
			close(){
				this.isShow=false;
				uni.showTabBar({
					success: () => {
						
					}
				})
			},
			open(){
				uni.hideTabBar({
					success: () => {
						
					}
				})
				this.isShow=true;
			},
			setShareData(payload){
				this.title=payload.title;
				this.cntText=payload.cntText,
				this.img=payload.img;
				this.href=payload.href
			}
		},
		created() {
			this.checkInstall()
			
		}
	}
</script>

<style lang="less" scoped>
	.mask{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999999999;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		align-items: flex-end;
		.actionBox{
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			.list{
				display: flex;
				padding: 30upx 20upx;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 20%;
					.iconfont{
						width: 100upx;
						height: 100upx;
						background-color: #f4f4f4;
						border-radius: 50%;
						text-align: center;
						line-height: 100upx;
						font-size: 60upx;
						margin-bottom: 20upx;
						color: #FFFFFF;
					}
					text{
						font-size: 28upx;
						color: #777777;
					}
					.icon-copy{
						color: #757575;
					}
					.icon-qq{
						background-color: #4ca3e5;
					}
					.icon-weixin{
						background-color: #56bc3f;
					}
					.icon-pengyouquan{
						background-color: #5bc2a5;
					}
					.icon-sina{
						background-color: #db4637;
					}
				}
			}
			button{
				width: 100%;
				font-size: 32upx;
				height: 110upx;
				line-height: 100upx;
				background-color: #FFFFFF;
				border-top: 10upx solid #f4f4f4;
			}
		}
	
	}
	.acMask{
		align-items: center;
		justify-content: center;
		.koulinBox{
			width: 90%;
			background-color: #FFFFFF;
			border-radius: 20upx;
			padding: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 32upx;
			.title{
				font-size: 36upx;
				font-weight: bold;
			}
			.koulin{
				margin-top: 20upx;
				width: 100%;
				background-color: #f4f4f4;
				padding: 20upx 10upx;
				border-radius: 10upx;
				color: #777777;
				word-break: break-all;
			}
			.buttonBox{
				margin-top: 20upx;
				display: flex;
				align-items: center;
				color: #FFFFFF;
				background-color: #4ca3e5;
				height: 90upx;
				border-radius: 45upx;
				line-height: 90upx;
				padding: 0 30upx;
				.iconfont{
					font-size: 48upx;
					margin-right: 10upx;
				}
			}
		}
	}
</style>
